<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="3goods.css" />
		<link rel="stylesheet" type="text/css" href="font_2734701_hw7r7uo4u1i/iconfont.css" />
	</head>
	<body>
		<header>

		</header>

		<footer>

		</footer>
		<div id="box">
			<div id="infor">

				<a href="">首页</a><span class="iconfont icon-arrow-right-copy-copy-copy-copy-copy"></span><a href="">
					臻选礼盒</a>
			</div>
			<div id="tittle">
				<h2>臻选礼盒</h2>
				<div id="select">
					<select name="">
						<option value="">销量排行</option>
						<option value="">上市时间</option>
						<option value="">销量排序</option>
						<option value="">价格由高到低</option>
						<option value="">价格由高到低</option>
					</select>
				</div>
			</div>
			<div id="three">
				<div id="left">
					<ul class="nav1">
						<li><span class="iconfont icon-arrow-right-copy-copy-copy-copy-copy"><a href=""
									class="line">明星产品</span></a>

						</li>
						<li><span class="iconfont icon-arrow-right-copy-copy-copy-copy-copy"><a href=""
									class="line">臻选礼盒
								</a></li>


						<li>
							<span class="iconfont icon-arrow-right-copy-copy-copy-copy-copy"><a href=""
									class="line">护肤</a>
								<ul class="nav6">
									<li><a href="" class="line">眼霜</a></li>
									<li><a href="" class="line">卸妆</a></li>
									<li><a href="" class="line">洁面</a></li>
									<li><a href="" class="line">乳液</a></li>
									<li><a href="" class="line">化妆水</a></li>
									<li><a href="" class="line">美容液</a></li>
									<li><a href="" class="line">面霜</a></li>
									<li><a href="" class="line">面膜</a></li>
									<li><a href="" class="line">按摩</a></li>
									<li><a href="" class="line">防护</a></li>

								</ul>
						</li>
						<li>
							<span class="iconfont icon-arrow-right-copy-copy-copy-copy-copy"><a href=""
									class="line">彩妆</a>
								<ul class="nav3">
									<li><a href="" class="line">腮红</a></li>
									<li><a href="" class="line">眼影</a></li>
									<li><a href="" class="line">眉笔</a></li>
									<li><a href="" class="line">眼线</a></li>
									<li><a href="" class="line">睫毛膏</a></li>
									<li><a href="" class="line">唇膏</a></li>
									<li><a href="" class="line">粉饼</a></li>
									<li><a href="" class="line">粉底液</a></li>
									<li><a href="" class="line">粉底霜</a></li>
									<li><a href="" class="line">基底乳</a></li>
									<li><a href="" class="line">蜜粉</a></li>
									<li><a href="" class="line">修颜膏</a></li>
								</ul>

						</li>

						<li>
							<span class="iconfont icon-arrow-right-copy-copy-copy-copy-copy"> <a href=""
									class="line">美妆工具</a>
								<ul class="nav4">
									<li><a href=" " class="line">护肤工具</a></li>
									<li><a href=" " class="line">底妆工具</a></li>
									<li><a href=" " class="line">彩妆工具</a></li>
								</ul>
						</li>
						<li>
							<span class="iconfont icon-arrow-right-copy-copy-copy-copy-copy"><a href=""
									class="line">产品系列</a>
								<ul class="nav5">
									<li><a href=" " class="line">植物欣韵系列</a></li>
									<li><a href=" " class="line">原色流光系列</a></li>
									<li><a href=" " class="line">蔚馥系列</a></li>
									<li><a href=" " class="line">黛珂和服之韵香水系列</a></li>
									<li><a href=" " class="line">智密紧颜系列 </a></li>
									<li><a href=" " class="line">新AQ珍萃精颜系列</a></li>
									<li><a href=" " class="line">iP.Shot</a></li>
									<li><a href=" " class="line">AQ珍萃精颜系列</a></li>
									<li><a href=" " class="line">AQMW系列</a></li>
									<li><a href=" " class="line">新AQ系列</a></li>
									<li><a href=" " class="line">时光活妍系列</a></li>
									<li><a href=" " class="line">保湿美容液系列</a></li>
									<li><a href=" " class="line">莹润粹白菁华系列</a></li>
									<li><a href=" " class="line">优循美容液系列</a></li>
									<li><a href=" " class="line">白泥洗颜霜</a></li>
									<li><a href=" " class="line">牛油果乳液</a></li>
									<li><a href=" " class="line">紫苏精华水</a></li>
									<li><a href=" " class="line">黛珂防晒乳</a></li>
								</ul>
						</li>

					</ul>
					<div id="price">
						<p class="pline"></p>
						<p class="plineone">筛选产品</p>
						<p class="plinetwo"></p>
						<p class="plinethree">
							<span class="iconfont icon-arrow-right-copy"></span>
							<a href="" class="text">价格区间</a>
						</p>
						<p class="plinefour">从320元 到 1380元</p>
						<p class="plinefive">
							<span class="iconfont icon-yuanquan-red-copy" class="circle">
								<span class="iconfont icon-yuanquan-red-copy" class="circleone">
						</p>
						<p class="plinesix">

						</p>
					</div>
				</div>
				<div id="middle">
					<ul class="photo">
						<!-- <li class="photoli">
							<img src="img/22.jpg">
							<p class="photoone">黛珂保湿美容液光耀未来版</p>
							<p class="phototwo">¥1050</p>
							<button type="button">立购买即</button>
						</li>
						<li class="photoli-">
							<img src="img/23.jpg">
							<p class="photoone">黛珂智密紧颜水乳套组</p>
							<p class="phototwo">¥1040</p>
							<p class="infor">滋润型-普通型</p>
							<button type="button">立购买即</button>
						</li>
						<li class="photoli-">
							<img src="img/25.jpg">
							<p class="photoone">黛珂植物欣韵乳水保湿套组</p>
							<p class="phototwo">¥680</p>
							<p class="infor">滋润型 - 普通型</p>
							<button type="button">立购买即</button>
						</li>

						<li class="photoli-">
							<img src="img/25.jpg">
							<p class="photoone">植物欣韵匀皙焕白乳水套组</p>
							<p class="phototwo">¥ 680</p>
							<p class="infor">滋润型 - 普通型</p>
							<button type="button">立购买即</button>
						</li>
						<li class="photoli-">
							<img src="img/26.jpg">
							<p class="photoone">黛珂AQ舒活修护套组</p>
							<p class="phototwo">¥ 1,380</p>
							<p class="infor">滋润型 - 普通型</p>
							<button type="button">立购买即</button>
						</li>
						<li class="photoli">
							<img src="img/27.jpg">
							<p class="photoone">黛珂AQ舒活美白套组</p>
							<p class="phototwo">¥ 1,380</p>
							<button type="button">立购买即</button>
						</li>
						<li class="photoli">
							<img src="img/28.jpg">
							<p class="photoone">黛珂保湿美容液双瓶套组</p>
							<p class="phototwo">¥ 1,380</p>
							<button type="button">立购买即</button>
						</li>
						<li class="photoli">
							<img src="img/29.jpg">
							<p class="photoone">黛珂紫苏水牛油果大容量囤货套组</p>
							<p class="phototwo">¥ 1,060</p>
							<button type="button">立购买即</button>
						</li>
						<li class="photoli-">
							<img src="img/30.jpg">
							<p class="photoone">黛珂 植物欣韵三部曲套组</p>
							<p class="phototwo">¥ 920</p>
							<p class="infor">滋润型 - 普通型</p>
							<button type="button">立购买即</button>
						</li> -->

					</ul>
					<div id="page">
						<ul class="pageul">
							<li class="pageli"><a href="">1</a></li>
							<li class="pagelione"><a href="">2</a></li>
							<li class="pagelitwo"><a href="">下一页</a></li>
							<li class="pagelithree"><a href="">末页</a></li>

						</ul>
					</div>
				</div>
				<div id="right">
					<div id="right-">
						<p class="tittle">选择黛珂官网</p>
						<p class="tittleone">购物的理由</p>
						<ul>
							<li>
								<span class="iconfont icon-liwu-copy-copy"></span>
								<p class="china">独家赠礼</p>
								<p class="chinaxian"></p>

							</li>
							<li>
								<span class="iconfont icon-che"></span>
								<p class="china">全场免运费</p>
								<p class="chinaxian"></p>

							</li>
							<li class="lastli">
								<span class="iconfont icon-zhengpinbaozheng"></span>
								<p class="china">正品保证</p>
								<p class="chinaxian"></p>

							</li>
						</ul>
						<p class="iphone">联系我们</p>
						<p class="number"><span class="iconfont icon--pc-phone"></span> 400-920-2203</p>
					</div>

				</div>
			</div>

		</div>

	</body>
</html>
<script src="jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="3goods.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	$("header").load("header.html");
	$("footer").load("foot.html");


	$.get("3care.php", {
		typeId: "1"
	}, function(data) {
		console.log(data);
		let goodslist = JSON.parse(data)
		console.log(typeof goodslist);
		let str = "";
		goodslist.forEach(item => {
			//console.log(item);


			str += `
				  <li class="photoli">
				  <img src="${item.img}">
				  <p class="photoone">${item.word}</p>
				  <p class="phototwo">${item.price}</p>
				  <p class="infor">${item.word2}</p>
				<button type="button">  <a href="#">${item.btn}</a></button>
				  </li>
				  `
		});
		$(".photo").html(str);
	})
</script>
